<template>
  <div class="info-card hover-style" @click="checkDetails">
    <div class="icon box-shadow-lottery" :style="bg">
      <icon-svg :iconClass="lotteryInfo.icon"></icon-svg>
    </div>
    <div class="context">
      <p class="context-name">{{lotteryInfo.type}}</p>
      <p class="context-date">距<span>{{lotteryInfo.dateNo}}期开奖</span></p>
      <p class="context-time">
        <count-down :timeStamp="lotteryInfo.drawTime" style="marginLeft: -3px;"></count-down>
      </p>
    </div>
  </div>
</template>

<script>
import CountDown from '@/components/base/count-down/count-down'
export default {
  components: {
    CountDown 
  },
  props: {
    lotteryInfo: {
      type: Object,
      default: function() {
        return {
          id: 1,
          type: '重庆时时彩',
          dateNo: '119217',
          drawTime: new Date().getTime() + 10000,
          imgUrl: ''
        }
      }
    }
  },
  data() {
    return {
      drawTime: '00:00:00'
    }
  },
  methods: {
    checkDetails() {
      this.$router.push({path: this.lotteryInfo.path})
    }
  },
  computed: {
    bg() {
      return `background: url(${this.lotteryInfo.bg}) no-repeat center / cover`
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .info-card
    display flex
    width 275px
    height 120px
    align-items center
    box-sizing border-box
    border 1px solid rgba(250,248,248,1)
    &.info-card:hover 
      border 1px solid rgba(219, 211, 211, 1)
      box-shadow 0px 3px 6px 0px rgba(0, 0, 0, 0.1)
      border-radius 3px 
    .icon
      width 72px
      height 72px
      border-radius 50%
      margin 0 20px
      font-size 66px 
      display flex 
      align-items center
      justify-content center
    .context
      .context-name
        font-size 15
        font-weight 700
        color #333
        height 12px
      .context-date
        height 12px
        margin 8px 0
        color #828282
      .context-time
        font-size 24px
        height 18px
        // font-family LEDFont
        font-weight bold 
        color $color-theme-red
      
</style>